<!--
 @description 创建收款
 @fileName index.vue
 @author zengqiongying
 @created 2022/11/06 16:20:21
-->
<template>
  <div class="page-has-bottom bg_gray">
    <ComHeader :title="isProceeds?'收款信息':'退款信息'" bg-color="#FAFBFE" />
    <div class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" :disabled="!enbleSubmit" @click="handlerConfirm">确定</van-button>
    </div>
    <van-form :show-error-message="false" @submit="handlerConfirm">
      <Cell v-if="!isProceeds" title="已收款金额" custom :right="false" :value="`${totalAmount}元`" />
      <!-- <FieldSelect
        v-model="formData.operatingType"
        title="操作类型"
        :url="`/data-dict/app/v2/dictionary/CRM_RECEIPT_ACTION_TYPE`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="{ query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
        disabled
      />
      <FieldSelect
        v-model="formData.operatingObject"
        title="操作对象"
        placeholder="请选择(必选)"
        :url="`/data-dict/app/v2/dictionary/CRM_RECEIPT_ACTION_OBJECT`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="{ query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
        disabled
      /> -->
      <FieldSelect
        v-model="formData.receiptType"
        :title="`${isProceeds?'收款':'操作'}类型`"
        placeholder="请选择(必选)"
        :url="`/data-dict/app/v2/dictionary/CRM_RECEIPT_TYPE`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="{ query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
        :excludes="['QYReceipt']"
        required
      />
      <FieldPicker
        v-model="formData.receiptWay"
        :title="`${isProceeds?'收款':'退款'}方式`"
        placeholder="请选择(必选)"
        :url="`/data-dict/app/v2/dictionary/CRM_SETTLEMENT_WAY`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="{ query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
        required
      />
      <Cell
        v-model="formData.amount"
        :title="`${isProceeds ?'收款':'退款'}金额`"
        placeholder="请输入"
        :right="false"
        is-input
        required
      />
      <Cell
        v-model="formData.remarks"
        :title="`${isProceeds ?'收款备注':'退款原因'}`"
        placeholder="请输入"
        :right="false"
        is-input
        :required="!isProceeds"
      />
    </van-form>
  </div>
</template>

<script>
import FieldSelect from '@/components/FieldSelect'
import FieldPicker from '@/components/FieldPicker'
import Cell from '@/components/ListCell'
import { bus } from '@/utils/bus'
import { getShopRemainingAmount, receiptInfoCreate } from '@/apis/customer'
export default {
  name: 'CustomeMoney',
  components: { Cell, FieldPicker, FieldSelect },
  filters: {},
  mixins: [],
  data() {
    return {
      clueCustomerId: this.$route.query.id, // 当前线索客户Id
      clueCustomerName: this.$route.query.name, // 当前线索客户Id
      formData: {
        amount: '',
        operatingType: this.$route.name === 'CustomerRefund' ? 'Refund' : 'Collection', // 操作类型：Collection 收款， Refund 退款
        operatingObject: 'Store', // 操作对象： Store 门店， QuanYou 全友
        receiptType: '',
        remarks: '',
        receiptWay: ''
      },
      totalAmount: 0
    }
  },

  computed: {
    isProceeds() {
      return this.formData.operatingType === 'Collection'
    },
    enbleSubmit() {
      return this.formData.receiptType && this.formData.receiptWay && this.formData.amount
    }
  },
  watch: {
    'formData.receiptType'(v) {
      this.$set(this.formData, 'operatingType', v === 'Refund' ? 'Refund' : 'Collection')
    }
  },

  created() {
    this.getShopRemainingAmount()
  },
  activated() {
    this.getShopRemainingAmount()
  },

  mounted() {},

  methods: {
    getShopRemainingAmount() {
      getShopRemainingAmount(this.clueCustomerId).then(res => {
        this.totalAmount = res.data
      })
    },
    validatorAmount(v) {
      const t = parseFloat(v)
      if (!isNaN(t) && t > 0 && /^\d+$|^\d+\.\d{1,2}$/.test(v)) {
        return true
      } else {
        this.$toast('金额只能是合法数字且最多两位小数')
        return false
      }
    },
    handlerConfirm() {
      if (this.formData.operatingObject === '') {
        this.$toast('请选择操作对象')
        return
      }
      if (this.formData.receiptType === '') {
        this.$toast('请选择收款类型')
        return
      }
      if (this.formData.receiptWay === '') {
        this.$toast(`请选择${this.isProceeds ? '收' : '退'}款方式`)
        return
      }
      if (this.formData.amount === '') {
        this.$toast(`请输入${this.isProceeds ? '收' : '退'}款金额`)
        return
      } else {
        const flag = this.validatorAmount(this.formData.amount)
        if (!flag) return
      }
      if (!this.isProceeds && this.formData.remarks === '') {
        this.$toast(`请输入退款原因`)
        return
      }
      const data = {
        clueCustomerId: this.clueCustomerId,
        ...this.formData
      }
      return receiptInfoCreate(data).then(res => {
        this.$toast('操作成功')
        bus.$emit('refreshCustomerItem', {
          title: !this.isProceeds ? '退款' : '收款',
          type: !this.isProceeds ? 'refund' : 'collection', // Collection 收款， Refund 退款,
          id: this.clueCustomerId
        })
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>

</style>
